<script setup lang="ts"></script>

<template>
  <section class="bg-white card-container">
    <div class="flex justify-between items-center card-header">
      <h2 class="card-h2"><slot name="title" /></h2>
      <div class="mr-4 text-xs card-operation">
        <slot name="operation" />
      </div>
    </div>
    <div class="card-body">
      <slot />
    </div>
  </section>
</template>

<style scoped>
.card-container {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
}

.card-header {
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  padding: 1rem;
}

.card-h2 {
  font-size: medium;
}

.card-h2::before {
  @apply bg-primary;
  content: '';
  width: 4px;
  height: 16px;
  display: block;
  margin-right: 0.5rem;
  float: left;
  margin-top: 4px;
  border-radius: 25%;
}

.card-operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 100%;
}

.card-body {
  padding: 1rem;
}

:slotted(.card-operation a:hover) {
  color: var(--el-color-primary);
  cursor: pointer;
  font-weight: bold;
}

:slotted(.card-operation .right-arrow) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:slotted(.card-operation .right-arrow::after) {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
}
</style>
